<template>
  <div>
    <div class="imags">
      <img
        ref="imageNode"
        :src="src"
        alt=""
        :style="{ width: width, height: height }"
        srcset=""
      />
      <div class="ant-image-mask">
        <div class="ant-image-mask-info" @click="model = true">
          <span role="img" aria-label="eye" class="anticon anticon-eye"
            ><svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="eye"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
              ></path></svg></span
          >预览
        </div>
      </div>
    </div>
    <div v-if="model" class="shouwImg">
      <div class="ant-image-preview-body">
        <ul class="ant-image-preview-operations">
          <li
            class="ant-image-preview-operations-operation"
            @click="model = false"
          >
            <span
              role="img"
              aria-label="close"
              class="anticon anticon-close ant-image-preview-operations-icon"
              ><svg
                viewBox="64 64 896 896"
                focusable="false"
                data-icon="close"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
                ></path></svg
            ></span>
          </li>
          <li
            class="ant-image-preview-operations-operation"
            @click="transform(-120)"
          >
            <span
              role="img"
              aria-label="zoom-in"
              class="anticon anticon-zoom-in ant-image-preview-operations-icon"
              ><svg
                viewBox="64 64 896 896"
                focusable="false"
                data-icon="zoom-in"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
                ></path></svg
            ></span>
          </li>
          <li
            class="
              ant-image-preview-operations-operation
              ant-image-preview-operations-operation-disabled
            "
            @click="transform(120)"
          >
            <span
              role="img"
              aria-label="zoom-out"
              class="anticon anticon-zoom-out ant-image-preview-operations-icon"
              ><svg
                viewBox="64 64 896 896"
                focusable="false"
                data-icon="zoom-out"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
                ></path></svg
            ></span>
          </li>
          <li
            class="ant-image-preview-operations-operation"
            @click="rotating(120)"
          >
            <span
              role="img"
              aria-label="rotate-right"
              class="
                anticon anticon-rotate-right
                ant-image-preview-operations-icon
              "
              ><svg
                viewBox="64 64 896 896"
                focusable="false"
                data-icon="rotate-right"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <defs><style></style></defs>
                <path
                  d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"
                ></path>
                <path
                  d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z"
                ></path></svg
            ></span>
          </li>
          <li
            class="ant-image-preview-operations-operation"
            @click="rotating(-120)"
          >
            <span
              role="img"
              aria-label="rotate-left"
              class="
                anticon anticon-rotate-left
                ant-image-preview-operations-icon
              "
              ><svg
                viewBox="64 64 896 896"
                focusable="false"
                data-icon="rotate-left"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <defs><style></style></defs>
                <path
                  d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z"
                ></path>
                <path
                  d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z"
                ></path></svg
            ></span>
          </li>
        </ul>
        <div
          class="ant-image-preview-img-wrapper"
          style="transform: translate3d(0px, 0px, 0px)"
        >
          <img
            ref="backgroundImg"
            class="ant-image-preview-img"
            :src="src"
            style="transform: scale3d(1, 1, 1) rotate(0deg)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: '100px',
    },
    height: {
      type: String,
      default: '100px',
    },
    src: {
      type: String,
      default:
        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
  },
  data() {
    return {
      imageNode: this.$refs.imageNode,
      model: false,
      errImage:
        '',
    }
  },
  watch: {
    src: {
      handler(newValue) {
        const stopTime = setTimeout(async () => {
          const lod = await this.loadImage(newValue).catch((Error) => {
            this.$refs.imageNode.src = this.errImage
          })
          lod && (this.$refs.imageNode.src = newValue)
          clearTimeout(stopTime)
        }, 50)
      },
      // deep: true,
      immediate: true,
    },
  },
  mounted() {
    document.addEventListener('DOMMouseScroll', this.handlerMouseWheel)
    window.addEventListener('mousewheel', this.handlerMouseWheel)
  },

  methods: {
    // 旋转
    rotating(x) {
      const divs = this.$refs.backgroundImg;

     if(divs){
       const [Wno, tow] = divs.style.transform.match(/\(([^)]*)\)/g)
       const degs = parseInt(tow.replace(/[^0-9]/gi, ''))
       const deg = x > 0 ? degs + 90 : degs - 90
       divs.style.transform = `scale3d${Wno} rotate(${deg}deg)`
     }
    },
    // 滚动
    handlerMouseWheel(event) {
      const wheelDelta = event.detail || event.wheelDelta
      this.transform(wheelDelta)
    },
    // 缩放
    transform(wheelDelta) {
      const divs = this.$refs.backgroundImg;
     if(divs){
       const [, a] = divs.style.transform.match(/\(([^)]*)\)/)
       let zoom = 0
       const [tran] = a.split(',')
       if (wheelDelta < 0) zoom = parseInt(tran) + 1
       if (wheelDelta > 0)
         zoom = parseInt(tran) - 1 <= 1 ? 1 : parseInt(tran) - 1
       divs.style.transform = `scale3d(${zoom}, ${zoom}, 1) rotate(0deg)`
     }
    },
    loadImage(imgUrl) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.src = imgUrl
        img.onload = (params) => {
          // 成功函数
          resolve('ok', params)
        }
        img.onerror = (err) => {
          reject(new Error(err))
        }
      })
    },
  },
}
</script>
<style scoped>
.shouwImg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 999;
  background: rgba(1, 1, 1, 0.2);
}
.ant-image-preview-body {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ant-image-preview-operations {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #000000d9;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  font-feature-settings: 'tnum';
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 100%;
  color: #ffffffd9;
  list-style: none;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: auto;
}

.ant-image-preview-operations-operation {
  margin-left: 12px;
  padding: 12px;
  cursor: pointer;
}
.anticon {
  display: inline-block;
  color: inherit;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ant-image-preview-img-wrapper {
  text-align: center;
  position: absolute;
  inset: 0;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ant-image-preview-img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  transform: scale(1);
  cursor: -webkit-grab;
  cursor: grab;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: auto;
}
</style>

<style scoped>
.imags {
  position: relative;
  display: inline-block;
}
.imags img {
  width: 200px;
  height: 200px;
  cursor: pointer;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
.imags .ant-image-mask:hover {
  opacity: 1;
  transition: opacity 0.3s;
}
.ant-image-mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}
</style>
